<template>
  <div class="page-container">
    <van-nav-bar
      title="用户登录/注册"
      left-text=""
      right-text=""
      left-arrow
      style="background-color: #f5f5f5"
      @click-left="onClickLeft"
    />
    <div class="login-container">
      <van-image
        round
        width="80px"
        height="80px"
        :src="logo"
        style="margin-bottom: 30px"
      />
      <van-field
        v-model="form.phone"
        center
        clearable
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="form.code"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            size="small"
            type="default"
            :disabled="sendCodeDisabled"
            @click.native="sendCode"
          >{{ sendCodetText }}</van-button>
        </template>
      </van-field>

      <van-button
        type="primary"
        size="large"
        round
        color="#93A3D6"
        style="margin-top: 20px"
        @click="onSubmit"
      >确定</van-button>
      <div class="user-agreement-box">
        <van-checkbox
          v-model="checked"
          icon-size="14px"
          @change="changeCheck"
        >我已阅读并同意</van-checkbox>
        <router-link
          class="user-agreement-link"
          to="/userAgreement"
          style="line-height: 20px"
        >《用户注册协议》</router-link>
        <router-link
          class="user-agreement-link"
          to="/userNotice"
          style="line-height: 20px"
        >《养眼调理须知》</router-link>
      </div>
    </div>
  </div>
</template>

<script>
// import { boDebounce } from '@/utils/common'
import { getVerificationCode, login } from '@/api/login'
import { Button, Card, Tag, Field, Form, Toast, Checkbox } from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Card.name]: Card,
    [Tag.name]: Tag,
    [Field.name]: Field,
    [Form.name]: Form,
    [Toast.name]: Toast,
    [Checkbox.name]: Checkbox
  },
  data() {
    return {
      logo: require('@/assets/logo.jpg'),
      form: {
        store: localStorage.getItem('adl_store_id'),
        phone: '',
        code: ''
      },
      checked: false,
      sendCodeDisabled: false,
      sendCodetText: '发送验证码',
      totalCount: null,
      timer: null // 倒计时
    }
  },
  created() {},
  methods: {
    // 发送验证码
    sendFunc() {
      if (!this.form.store) {
        Toast('请通过门店二维码扫码进入')
        return false
      } else if (!this.form.phone) {
        Toast('请输入手机号码')
        return false
      } else if (
        this.form.phone &&
        !/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(
          this.form.phone
        )
      ) {
        Toast('请输入正确的手机号码')
        return false
      } else if (!this.checked) {
        Toast('请阅读并勾选底部协议')
        return false
      }

      const TIME_COUNT = 60
      if (!this.timer) {
        this.totalCount = TIME_COUNT
        this.sendCodeDisabled = true
        this.sendCodetText = '倒计时 ' + this.totalCount + ' s'
        this.timer = setInterval(() => {
          if (this.totalCount > 0 && this.totalCount <= TIME_COUNT) {
            this.totalCount--
            this.sendCodetText = '倒计时 ' + this.totalCount + ' s'
          } else {
            this.sendCodetText = '重新发送'
            this.sendCodeDisabled = false
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      getVerificationCode({
        store: this.form.store,
        phone: Number(this.form.phone)
      })
        .then((res) => {
          if (res.error.code === 0) {
            Toast('验证码发送成功')
          } else {
            this.sendCodeDisabled = false
          }
        })
        .catch(() => {
          this.sendCodeDisabled = false
        })
    },
    // 发送验证码
    // sendCode: boDebounce('sendFunc', 3000, true),
    sendCode() {
      this.sendFunc()
    },
    // 确认登录
    onSubmit() {
      if (!this.form.phone) {
        Toast('请输入手机号码')
        return false
      } else {
        if (
          !/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(
            this.form.phone
          )
        ) {
          Toast('请输入正确的手机号码')
          return false
        } else if (!this.form.code) {
          Toast('请输入手机验证码')
          return false
        } else if (this.form.code.length !== 6) {
          Toast('请输入6位验证码')
          return false
        } else if (!this.checked) {
          Toast('请阅读并勾选底部协议')
          return false
        }
      }
      const data = {
        phone: this.form.phone,
        store: this.form.store,
        code: this.form.code
      }
      login(data).then((res) => {
        if (res.error.code === 0) {
          localStorage.setItem('TOKEN', res.data)
          Toast('登录成功')
          this.$router.push({
            name: 'personal',
            query: {
              fromLogin: 1
            }
          })
        }
      })
    },
    // 勾选用户协议
    changeCheck(e) {
      this.checked = e
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.login-container {
  margin-top: 20%;
  padding: 0 20px;
  text-align: center;
}
// vant ui navbar底部出现白线问题 https://www.jianshu.com/p/810419c02382
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
::v-deep .van-nav-bar__arrow {
  color: #000000;
}
.user-agreement-box {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  color: #666666;
  font-size: 12px;
}
.user-agreement-link:visited {
  color: #0000ee;
}
</style>
